<template>
  <a-modal
    width="600px"
    :footer="null"
    :maskClosable="false"
    :closable="false"
    :mask="false"
    v-model:open="modalShow"
    :wrap-style="{ overflow: 'hidden' }"
  >
    <template #title>
      <modalTitle v-if="info" @close="close" :title="info.name"></modalTitle>
    </template>
    <div style="padding: 0 10px 10px 10px" v-if="info">
      <!-- <div v-for="(item,i) in info.types.split(',')" :key="i" style="display: flex; align-items: center;">
            <div style="font-size: 12px; color:#ffffff" class="tag">{{ item }}</div>
        </div> -->
      <div style="display: flex; align-items: center; flex-wrap: wrap; margin-top: 10px">
        <div style="width: 50%; display: flex; align-items: center; color: #ffffff; margin-bottom: 5px">
          <div style="width: 80px; font-size: 12px">联系电话</div>
          <div style="flex: 1; font-size: 12px">{{ info.phone }}</div>
        </div>
        <div style="width: 50%; display: flex; align-items: center; color: #ffffff; margin-bottom: 5px">
          <div style="width: 80px; font-size: 12px">风险登记</div>
          <div style="flex: 1; font-size: 12px">{{ info.fxdj === "1" ? "重大风险" : info.fxdj === "2" ? "较大风险" : "一般风险" }}</div>
        </div>
        <div style="width: 100%; display: flex; align-items: center; color: #ffffff; margin-bottom: 5px">
          <div style="width: 80px; font-size: 12px">地址</div>
          <div style="flex: 1; font-size: 12px">{{ info.name }}</div>
        </div>
        <div style="width: 100%; display: flex; color: #ffffff; margin-bottom: 5px">
          <div style="width: 80px; font-size: 12px">预警内容</div>
          <div style="flex: 1; font-size: 12px">{{ info.yjnr }}</div>
        </div>
      </div>
      <div class="top">
        <div class="top_item" @click="jk = 1">
          <div class="top_item_leftIcon"></div>
          <div class="top_item_name">监控1</div>
        </div>
        <!-- <div class="top_item" @click="jk = 2" style="margin: 0 10px;">
          <div class="top_item_leftIcon"></div>
          <div class="top_item_name">监控2</div>
        </div>
        <div class="top_item" @click="jk = 3">
          <div class="top_item_leftIcon"></div>
          <div class="top_item_name">监控3</div>
        </div> -->
      </div>
      <div class="video-container" v-if="modalShow">
        <video v-if="isOK" ref="videoElementdt" class="video-js vjs-big-play-centered" autoplay controls></video>
        <div v-else class="jkbox-err">连接失败</div>
      </div>
      <!-- <div v-if="jk === 1"
        style="width: 100%; height:250px; background-size:100% 250px;border-radius:5px;background-image: url('/img/myimg/lk/jk2.png')">
      </div>
      <div v-if="jk === 2"
        style="width: 100%; height:250px; background-size:100% 250px;border-radius:5px;background-image: url('/img/myimg/lk/jk1.png')">
      </div>
      <div v-if="jk === 3"
        style="width: 100%; height:250px; background-size:100% 250px;border-radius:5px;background-image: url('/img/myimg/lk/jk3.png')">
      </div> -->
      <div style="display: flex; align-items: center; justify-content: center; margin-top: 20px">
        <div class="btn" @click="btnclick(1)">网格力量</div>
        <div class="btn" @click="btnclick(2)">发起无人机任务</div>
        <div class="btn" @click="btnclick(3)">现场处置人员</div>
        <div class="btn" @click="btnclick(4)">下发任务</div>
        <div class="btn" @click="btnclick(5)">连麦现场</div>
      </div>
    </div>
  </a-modal>
</template>
<script setup>
import { reactive, ref } from "vue"
import modalTitle from "../modalTitle.vue"
import videojs from "video.js"
import "video.js/dist/video-js.css"
import axios from "axios"
const emit = defineEmits(["close", "btnClick"])
const jk = ref(1)
const info = ref(null)
const modalShow = ref(false)
// 视频流
const spl = ref("")
const player = ref(null)
const videoElementdt = ref(null)
const isOK = ref(true)

const close = () => {
  modalShow.value = false
  if (player.value) {
    player.value.dispose()
  }
  emit("close")
}
const show = (e) => {
  console.log(e)
  info.value = e
  isOK.value = true
  modalShow.value = true
  if (e.name === "东正物流") {
    getSp("2751ca8a29ce47f7be3e9308b5a55338")
  } else if (e.name === "铁路物流园") {
    getSp("cc5b50a3034c4ab1ba47f63b8eba6275")
  } else {
    getSp("d2e25a5a25cf48268fa87ff256a808d2")
  }
}

const btnclick = (e) => {
  emit("btnClick", e, info.value)
}
defineExpose({ show, close })

const play = (url) => {
  player.value = videojs(videoElementdt.value, {
    autoplay: true,
    muted: true,
    controls: true,
    sources: [
      {
        src: url,
        type: "application/x-mpegURL"
      }
    ]
  })
  player.value.on("error", () => {
    isOK.value = false
  })
}

const getSp = async (cameraIndexCode) => {
  axios({
    method: "post",
    url: "http://ylz.chuangxing.ren/api/index/ics_test",
    data: {
      cameraIndexCode
    }
  }).then((res) => {
    spl.value = res.data.data.data.url
    play(spl.value)
  })
}
</script>
<style scoped>
.top {
  display: flex;
  width: 300px;
  align-items: center;
  justify-content: space-between;
  margin: 10px 0;

  .top_item {
    flex: 1;
    padding: 3px 10px 3px 3px;
    display: flex;
    align-items: center;
    background: linear-gradient(90deg, rgba(158, 247, 255, 0.1) 0%, rgba(0, 238, 255, 0) 100%);
    border: 1px solid;
    border-image-source: linear-gradient(180deg, rgba(30, 121, 88, 0) 0%, #1e6579 100%);

    .top_item_name {
      font-size: 10px;
      color: rgba(213, 242, 255, 1);
      flex: 1;
    }

    .top_item_num {
      color: rgba(158, 247, 255, 1);
      font-weight: bold;
      font-size: 12px;
    }

    .top_item_leftIcon {
      background-image: url("/img/myimg/lefticon1.png");
      background-size: 17px 15px;
      width: 17px;
      height: 15px;
    }
  }
}

.tag {
  width: 82;
  height: 24;
  border-radius: 4px;
  border-width: 1px;
  padding-top: 2px;
  padding-right: 6px;
  padding-bottom: 2px;
  padding-left: 6px;
  gap: 10px;
  background: #00667d;
  border: 1px solid #00c6cd;
}

.btn {
  background: linear-gradient(180deg, rgba(0, 36, 42, 0.5) 0%, rgba(0, 67, 78, 0.5) 100%);
  border: 1px solid #57ffff;
  color: #ffffff;
  font-size: 10px;
  padding: 5px 20px;
  border-radius: 99px;
  cursor: pointer;
  margin: 0 10px 10px 10px;
}

.video-container {
  width: 100%;
  height: 250px;
  margin: 0 auto;
  background: #000;
  position: relative;
}

/* 覆盖默认样式 */
:deep(.video-js) {
  width: 100%;
  height: 250px;
  position: relative;
}

:deep(.video-js .vjs-tech) {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

:deep(.vjs-big-play-button) {
  background-color: rgba(66, 184, 131, 0.7);
  border: none;
  width: 80px;
  height: 80px;
  line-height: 80px;
  border-radius: 50%;
  margin-left: -40px;
  margin-top: -40px;
}
</style>
